<script setup lang="ts">
import type { Link } from '@/types/link'

interface Props {
  list: Link[]
}

defineProps<Props>()
</script>

<template>
  <div
    class="mx-auto my-6 max-w-6xl animate-[slideUpIn_1s] rounded-md px-4 py-7 shadow-[0_0_1rem_rgba(0,0,0,0.1)] dark:bg-v-bg-dark dark:shadow-[0_0_1rem_#000000] md:px-9"
  >
    <h2 class="mb-4 mt-5 flex items-center text-xl font-bold md:text-22">
      <Icon name="mingcute:flower-3-fill" class="animate-spin-slow text-pink-200" />
      <span class="ml-1">本站信息</span>
    </h2>
    <blockquote
      class="mx-6 break-all rounded border-l-[3px] border-[#9d5b8b] bg-[#ffe6fa] px-4 py-3 text-sm leading-7 dark:border-[#cfacc5] dark:bg-[#322d31] md:text-15"
    >
      <p>名称：Vinson</p>
      <p>简介：梦想是一个天真的词，实现梦想是一个残酷的词</p>
      <p>头像：https://static.sakura520.co/config/4cf0a0ba668d5195007ec1b4c902f500.png</p>
    </blockquote>
    <h2 class="mb-4 mt-5 flex items-center text-xl font-bold md:text-22">
      <Icon name="mingcute:flower-3-fill" class="animate-spin-slow text-pink-200" />
      <span class="ml-1">申请方法</span>
    </h2>
    <div
      class="relative mx-9 mb-3 before:absolute before:-left-4 before:top-2 before:h-2 before:w-2 before:rounded-full before:bg-[#e9546b]"
    >
      需要交换友链的可在本页留言 (｡･∀･)ﾉﾞ
    </div>
    <blockquote
      class="mx-6 break-all rounded border-l-[3px] border-[#9d5b8b] bg-[#ffe6fa] px-4 py-3 text-sm leading-7 dark:border-[#cfacc5] dark:bg-[#322d31] md:text-15"
    >
      <p>出于信息需要,大佬你的信息格式要包含：网站名称、网站链接、头像链接、网站介绍、名称颜色</p>
    </blockquote>
    <h2 class="mb-4 mt-5 flex items-center text-xl font-bold md:text-22">
      <Icon name="mingcute:flower-3-fill" class="animate-spin-slow text-pink-200" />
      <span class="ml-1">小伙伴们</span>
    </h2>
    <div class="flex flex-wrap max-md:justify-center">
      <LinkBuddy
        v-for="item in list"
        :key="item.id"
        :avatar="item.avatar"
        :title="item.name"
        :link="item.url"
        :intro="item.introduction"
        :color="item.color"
      />
    </div>
    <Comment :type="2" />
  </div>
</template>
